<template>
	<view class="content">
		<view class="page-area" v-if="list.length">
			<view class="filterBox">
				<view class="left">
					<view class="item" :class="{active:sort==''}" @click="handleToSarch('')">
						综合
					</view>
					<view class="item" :class="{active:sort=='2'}" @click="handleToSarch('2')">
						销量
					</view>
					<view class="item"  :class="{active:sort=='3' || sort=='4'}"  @click="handlePriceSarch()">
						价格
						<view class="icon">
							<u-icon name="arrow-up" :color="sort=='4'?'#000':'#999'" size="6" ></u-icon>
							<u-icon name="arrow-down"  :color="sort=='3'?'#000':'#999'" size="6"></u-icon>
						</view>
					</view>
				</view>
				<!-- <view class="right">
					<text>筛选</text>
					<image src="/static/s.png" mode=""></image>
				</view> -->
			</view>
		</view>
		
		<view class="goods_list" v-if="list.length">
			<view class="item" v-for="item in list" :key="item.id" @click="handleToDetail(item.id)">
				<view class="image">
					<!-- <view class="t">
						<u-icon name="heart" color="#666" size="16"></u-icon>
					</view> -->
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="text">
					<view class="title clamp1">
						{{item.name}}
					</view>
					<view class="dec clamp1">
						{{item.subTitle}}
					</view>
					<view class="price">
						¥{{item.price}}
					</view>
				</view>
			</view> 
			<u-loadmore class="loadmore" :status="status" v-if="pageNum > 1" />
		</view>
		<view class="null" v-else>
			<u-empty text="暂无搜索结果" icon="/static/e.png" marginTop="100" ></u-empty>
		</view> 
		<view class="cart_icon" @click="handleToBags">
			<image src="/static/cart_i.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageNum:1,
				status: 'loadmore', 
				allData: false,
				keyword:'',
				sort:'',
				list:[]
			}
		},
		onLoad(option) {
			this.keyword = option.key
			this.getList()
		},
		onReachBottom() {
			if (this.allData) {
				this.status = 'loading'
				this.pageNum++
				this.getList();
			}
		},
		methods: {
			handlePriceSarch(){
				if(this.sort !='3' && this.sort!='4'){
					this.sort = '3'
				}else if(this.sort =='3'){
					this.sort = '4'
				}else if(this.sort == '4'){
					this.sort = '3'
				} 
				this.pageNum = 1
				this.getList()
			},
			handleToSarch(type){
				this.sort = type
				this.pageNum = 1
				this.getList()
			},
			handleToBags(){
				if(uni.getStorageSync('token')){
					uni.switchTab({
						url:"/pages/bags/index"
					})
				}else{
					uni.reLaunch({
						url:"/pages/user/login"
					})
				}
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`/pages/category/detail?id=${id}`
				})
			},
			getList(){
				this.$http({
					url:"/product/search",
					method:"get",
					data:{
						keyword:this.keyword,
						pageNum:this.pageNum,
						sort:this.sort,
						pageSize:10
					}
				}).then(data=>{
					if (this.pageNum == 1) {
						this.list = data.list
					} else {
						this.list.push(...data.list) 
					}  
					if (data.totalPage > data.pageNum) {
						this.allData = true
						this.status = 'loading'
					} else {
						this.status = 'nomore' 
					    this.allData = false
					}
				})
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart_icon{
		position: fixed;
		right: 30rpx;
		bottom: 60rpx;
		image{
			width: 88rpx;
			height: 88rpx;
		}
	}
	.goods_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
		.item{
			width: 49%;
			margin-bottom: 20rpx;
			background: #F8F8F8;
			 margin-bottom: 22rpx;
			 padding-bottom: 32rpx;
			.image{
				width: 100%;
				height: 310rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.t{
					position: absolute;
					right: 16rpx;
					top: 16rpx;
				}
				image{
					width: 100%;
					height: 310rpx;
				}
			}
			.text{
				padding: 0 30rpx;
				padding-top: 20rpx;
				.title{
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}
				.dec{
					font-size: 24rpx;
					color: #999;
					margin-top: 8rpx;
					text-align: center;
				}
				.price{
					font-size: 28rpx;
					margin-top: 16rpx;
						font-family: 'DINPro-Medium';
					text-align: center;
					color: #333;
				}
			}
		}
	}
	.filterBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.right{
			display: flex;
			align-items: center;
			text{
				font-size: 24rpx;
				color: #020202;
			}
			image{
				width: 22rpx;
				height: 22rpx;
				margin-left: 10rpx;
			}
		}
		.left{
			display: flex;
			align-items: center;
			.item{
				width: 98rpx;
				height: 48rpx;
				font-size: 24rpx;
				color: #999;
				margin-right: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 25rpx;
				border: 1px solid #E8E8E8;
				&.active{
					border: 1px solid #333;
					color: #333;
				}
				.icon{
					margin-left: 4rpx;
				}
			}
		}
	}
	.tabsBox{
		border-bottom: 1rpx solid #E8E8E8;
		padding-bottom: 20rpx;
	}
	.page-area{
		padding: 24rpx;
		box-sizing: border-box;
	}
</style>